<template>
  <vxe-form v-bind="formOptions" v-on="formEvents" ref="formRef">
    <template v-for="(slotContent, slotName) in $slots" :key="slotName" #[slotName]="scope">
      <slot :name="slotName" v-bind="scope"></slot>
    </template>
  </vxe-form>
</template>
<script setup lang="ts">
interface prop {
  formOptions: any
  reset: Function
  getTableList: Function
  search: Function
  updateSearchParams: Function
  tableRef: any
}
// 🌟组件props的ts定义必须在组件中声明
const props = withDefaults(defineProps<prop>(), {})
const formRef = ref()
// 搜索项表单的事件
const formEvents = {
  submit() {
    const { data } = props.formOptions
    props.updateSearchParams(data)
    props.search()
  },
  reset() {
    // props.tableRef.resetCustom({ resizable: true }) // 重置列宽
    if (props.tableRef.isSort()) {
      // props.tableRef.clearSort() // 清空排序
    }
    props.reset()
  }
}

defineExpose({ formRef })
</script>
<style lang="scss" scoped>
::v-deep(.vxe-button-group) {
  > button:last-child {
    &:hover {
      background-color: #ecf5ff;
    }
  }
}
::v-deep(.vxe-form--wrapper) {
  overflow: auto;
}
</style>
